<template>
	<scroll-view class="boxW" scroll-y="true" @scrolltolower="loadMore" refresher-enabled="true" :refresher-triggered="shanglaFlag"	 @refresherrefresh="reload"	>
		<view v-for="(item,index) in showData" class="boxN">
			{{item.name}}-{{index+1}}
		</view>
		<uni-load-more :status="moreType"></uni-load-more>
	</scroll-view>
</template>

<script setup>
	import {reactive,ref} from "vue"
	const data = [{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1},{name:1}]
	const moreType = ref("more")
	const showData = reactive([])
	let index =0
	const shanglaFlag = ref(false)
	function reload(){
		shanglaFlag.value =true
		console.log("上拉刷新")
		index =0
		showData.splice(0,showData.length)
		moreType.value = "loading"
		setTimeout(()=>{
			for(let i=0;i<index+6;i++){
				showData.push(data[i])
			}
			index=6
			shanglaFlag.value =false
		},2000)
		
	}
	reload()	
	function loadMore(){
		moreType.value = "loading"
		setTimeout(()=>{
			console.log(showData,17)
			// 说明数据要加载完了
			if(index+6>data.length){
				for(let i=index;i<data.length;i++){
					showData.push(data[i])
				}
				moreType.value = "no-more"
			}else{
				for(let i=index;i<index+6;i++){
					showData.push(data[i])
				}
				index = index+6
			}
		},2000)
	}
</script>

<style scoped>
	.boxW{
		height: 400rpx;
		background-color: antiquewhite;
		overflow: auto;
	}
	.boxN{
		height: 100rpx;
		border: 1rpx solid #000;
	}
</style>